<template>
  <div class="main-dashboard kill-margin">
    <div class="container">
      <!-- 顶部横幅 -->
      <div class="header-banner">
        <h1 class="banner-title">欢迎体验超级素材</h1>
        <p class="banner-subtitle"></p>
        <div class="banner-notice">
          当前为游客体验模式，所有数据均为演示效果<br />
          注册账号后即可开始真正的视频创作之旅!
        </div>
        <div class="banner-actions">
          <el-button type="success" v-if="!checkIsLogin()" @click="toLogin">立即注册</el-button>
          <el-button type="primary" @click="toVip">了解VIP</el-button>
          <!-- <span>联系QQ：2831668236</span> -->
        </div>
      </div>

      <div class="system-notice">
        <div class="notice-icon">📢</div>
        <div class="notice-text">【系统公告】欢迎来到超级素材</div>
      </div>

      <div class="main-content">
        <div class="quick-actions">
          <h2 class="section-title">快速操作</h2>
          <div class="actions-grid">
            <div class="action-card" @click="toText">
              <div class="action-icon icon-doc">
                <el-icon>
                  <Document />
                </el-icon>
              </div>
              <div class="action-info" @click="toText">
                <h3>文案生成视频 <span class="vip-tag">VIP</span></h3>
                <p>输入文本描述，生成短视频内容</p>
              </div>
            </div>

            <div class="action-card" @click="toPic">
              <div class="action-icon icon-camera">
                <el-icon>
                  <VideoCamera />
                </el-icon>
              </div>
              <div class="action-info">
                <h3>图片生成视频 <span class="vip-tag">VIP</span></h3>
                <p>上传图片并添加描述，生成动感画面</p>
              </div>
            </div>

            <div class="action-card" @click="toVip">
              <div class="action-icon icon-crown">
                <el-icon>
                  <Goods />
                </el-icon>
              </div>
              <div class="action-info">
                <h3>VIP管理</h3>
                <p>查看权益、激活历史与剩余次数</p>
              </div>
            </div>

            <div class="action-card" @click="toLog">
              <div class="action-icon icon-clock">
                <el-icon>
                  <AlarmClock />
                </el-icon>
              </div>
              <div class="action-info">
                <h3>使用记录</h3>
                <p>回顾生成记录与任务状态</p>
              </div>
            </div>
          </div>
        </div>

        <div class="demo-content">
          <h2 class="section-title">演示内容</h2>
          <CaseList />
        </div>
      </div>

      <div class="footer">
        <p>© 2025 目前最顶级视频生成模型 | 当前版本: {{ version }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import useUserStore from '@/store/modules/user';
import CaseList from './work/case-list.vue';

export default {
  name: 'MainDashboard',
  components: { CaseList },
  data() {
    return {
      version: '2.0.1',
      userStatus: '游客模式',
      userStats: {
        experience: '#无限制',
        accessTime: '不限制',
        demoCount: '3个',
      },
      demos: [
        {
          status: 'completed',
          type: '文案生成视频',
          time: '今天 14:30',
          description: '繁华都市夜晚的车流与灯光，展现现代城市的活力与美感',
          highlight: false,
        },
        {
          status: 'completed',
          type: '图片生成视频',
          time: '今天 12:15',
          description: '汹涌的海浪撞击海岸礁石，溅起白色的浪花',
          highlight: false,
        },
        {
          status: 'processing',
          type: '文案生成视频',
          time: '今天 10:45',
          description: '清晨的阳光透过茂密的树叶洒向大地，营造宁静氛围',
          highlight: true,
        },
      ],
    };
  },
  methods: {
    getStatusText(status) {
      const statusMap = {
        completed: '已完成',
        processing: '处理中',
        failed: '失败',
      };
      return statusMap[status] || '未知';
    },
    loadMoreDemos() {
      // 模拟加载更多演示内容
      this.demos.push({
        status: 'completed',
        type: '文案生成视频',
        time: '昨天 16:20',
        description: '太空站环绕地球飞行的壮丽景象，展示宇宙的浩瀚',
        highlight: false,
      });

      this.userStats.demoCount = `${this.demos.length}个`;
      this.$emit('more-demos-loaded', this.demos.length);
    },
    async checkIsLogin() {
      try {
        const userStore = useUserStore();
        const res = await userStore.getInfo();
        return res.user?.userId;
      } catch (error) {
        console.log('获取用户信息失败', error);
        return null;
      }
    },

    toLogin() {
      this.$router.push('/login');
    },
    toVip() {
      this.$router.push('/vip');
    },
    toText() {
      this.$router.push('/text');
    },
    toPic() {
      this.$router.push('/pic');
    },
    toLog() {
      this.$router.push('/log');
    },
  },
};
</script>
<style scoped>
* {
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.header-banner {
  background: linear-gradient(135deg, #1e88e5, #0d47a1);
  color: white;
  padding: 25px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
}

.banner-subtitle {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 15px;
}

.banner-notice {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 15px;
}

.banner-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.main-dashboard {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  padding: 20px;
  height: calc(100vh - 50px);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  overflow-y: auto;
}

.container {
  width: 100%;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  height: fit-content;
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, #1a73e8, #0d47a1);
  color: white;
  padding: 30px 40px;
  text-align: center;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 600;
}

.header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.system-notice {
  background-color: #fff9f9;
  border-left: 4px solid #ff4d4f;
  padding: 15px 20px;
  margin: 20px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.notice-icon {
  color: #1a73e8;
  font-size: 1.5rem;
  margin-right: 12px;
}

.notice-text {
  color: #ff4d4f;
  font-weight: 500;
}

.main-content {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.quick-actions {
  flex: 1;
}

.demo-content {
  flex: 2;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

.action-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #eaeaea;
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background: white;
}

.action-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-size: 1.5rem;
  color: white;
}

.icon-doc {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.icon-camera {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.icon-crown {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
  color: #ff6b6b !important;
}

.icon-clock {
  background: linear-gradient(135deg, #a9c9ff, #ffbbec);
}

.action-info h3 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  font-weight: 600;
}

.vip-tag {
  display: inline-block;
  background: #ffd700;
  color: #8b6914;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 5px;
  font-weight: 600;
}

.action-info p {
  font-size: 0.85rem;
  color: #666;
}

.footer {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 0.9rem;
  border-top: 1px solid #eee;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .quick-actions {
    max-width: 100%;
  }

  .actions-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 20px;
  }

  .header h1 {
    font-size: 2rem;
  }

  .actions-grid {
    grid-template-columns: 1fr;
  }

  .user-status {
    flex-direction: column;
    gap: 20px;
  }

  .status-right {
    justify-content: space-around;
    width: 100%;
  }
}
</style>
